<template>
  <div>
    <div>
      <el-input v-model="searchName" style="width: 150px;"/>
      <el-button native-type="button" type="primary" @click="getProductList">搜索</el-button>

      <span style="display: inline-block; width: 100px;"></span>

      商品-列表:
      <el-select v-model="currShopProductId" placeholder="请选择 商品" @change="getProductStockList">
        <el-option
          v-for="(product,index) in productList"
          :key="index"
          :label="product.name"
          :value="product.id">
        </el-option>
      </el-select>

      &nbsp;&nbsp;|&nbsp;&nbsp;
      商品型号-列表:
      <el-select v-model="currShopProductStockId" placeholder="请选择 商品型号" @change="setShopProductStockId">
        <el-option
          v-for="(product,index) in stockList"
          :key="index"
          :label="product.model"
          :value="product.id">
        </el-option>
      </el-select>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      商品价格:
      <span class="b red" v-text="getStockPrice()"></span>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      商品总库存:
      <span class="b red" v-text="getStockNums()"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShopProductStockBox',
  props: {
    isScoreStock: '',
    callback: Function
  },
  data: function () {
    return {
      searchName: '',
      currShopProductId: '',
      currShopProductStockId: '',
      productList: [],
      stockList: [],
    }
  },
  methods: {
    getStockPrice: function () {
      let $this = this
      if (this.currShopProductStockId <= 0) {
        return 0
      }
      var price = 0
      $this.stockList.forEach(function (value, index) {
        if (value.id === $this.currShopProductStockId) {
          price = value.price
        }
      })
      return price
    },
    getStockNums: function () {
      let $this = this
      if (this.currShopProductStockId <= 0) {
        return 0
      }
      var nums = 0
      $this.stockList.forEach(function (value, index) {
        if (value.id === $this.currShopProductStockId) {
          nums = value.nums
        }
      })
      return nums
    },
    setShopProductStockId: function () {
      this.$props.callback(this.currShopProductStockId)
    },
    getProductList: function () {
      let $this = this
      $this.productList = []
      $this.stockList = []
      $this.currShopProductId = ''
      $this.currShopProductStockId = ''
      $this.MyRequest($this.ApiDoNameShop + 'Product/getList', {name: this.searchName,isScore:0,status:1}, function (data) {
        if (data.list.length > 0) {
          $this.productList = data.list
          $this.currShopProductId = data.list[0].id
          $this.getProductStockList()
        }
        $this.$forceUpdate()
      })
    },
    getProductStockList: function () {
      let $this = this
      var form = {status:1,shopProductId: $this.currShopProductId, pageSize: 100, sortProp: 'id', sortOrder: 'DESC'}
      if (($this.$props.isScoreStock + '').length > 0) {
        form.isScore = $this.$props.isScoreStock - 0
      }
      $this.MyRequest($this.ApiDoNameShop + 'Product/getStockList', form, function (data) {
        if (data.list.length > 0) {
          $this.stockList = data.list
          $this.currShopProductStockId = data.list[0].id
        }
        $this.setShopProductStockId()
        $this.$forceUpdate()
      })
    },
  }
}
</script>

<style scoped>

</style>
